<template>
    <div class="fz">
        <div class="fz_head">
            <div class="head_title">
                <img class="head_fzIcon" src="@/assets/image/fzicon.jpg" alt="">
                <span class="app_name">国家反诈中心</span>
                <i class="iconfont icon-xinxi"></i>
            </div>
            <div class="head_pic"></div>
            <div class="head_fn">
                <img class="head_jubao" src="@/assets/image/jubao.png" alt="">
                <img class="head_baoan" src="@/assets/image/baoan.png" alt="">
                <img class="head_laidian" src="@/assets/image/laidian.png" alt="">
                <img class="head_heshi" src="@/assets/image/heshi.png" alt="">
            </div>
        </div>
        <div class="fz_body">
            <div class="dangerous">
                <span class="title">风险自查</span>
                <div class="phone">
                    <span class="phone_check">APP自检</span>
                    <span class="phone_test">手机自测可疑APP</span>
                </div>
            </div>
            <div class="news">
                <span class="news_title">最新动态</span>
                <div class="news_content" v-for="(item, index) in newsList" :key="index">
                    <span class="content_title">{{ item.title }}</span>
                    <span class="content_author">{{ item.author }}</span>
                    <span class="content_time">{{ item.time }}</span>
                    <img :src="item.img" alt="" class="content_img">
                    <span class="content_content">{{ item.content }}</span>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import axios from 'axios';

export default {
    data() {
        return {
            newsList: []
        };
    },
    async created() {
        try {
            const response = await axios.get('https://bsp268.laf.run/selectData');
            this.newsList = response.data.data[0].Home.news;
        } catch (error) {
            console.error(error);
        }
    }
};
</script>

<style lang="less" scoped>
.fz {
    width: 100vw;
    // BFC容器

}

.fz_head {
    .head_title {
        position: relative;
        height: 40px;
        margin-top: 10px;
        margin-left: 8px;
        margin-right: 5px;
        margin-bottom: 8px;

        .head_fzIcon {
            width: 30px;
            height: 30px;
            margin-top: 10px;
            margin-left: 10px;
        }

        .app_name {
            position: absolute;
            font-size: 17px;
            margin-left: 5px;
            margin-top: 16px;
            font-family: 'Times New Roman', Times, serif;
            font-weight: bold;
        }

        .icon-xinxi {
            float: right;
            margin-top: 12px;
            margin-right: 20px;
            font-size: 30px;
        }
    }

    .head_pic {
        position: relative;
        margin: 5px 15px;
        width: 92%;
        height: 170px;
        margin-left: 15px;
        background-image: url(@/assets/image/callout.jpg);
        background-size: cover;
        border-radius: 10px;
    }

    .head_fn {
        position: relative;
        margin-top: 13px;
        width: 92%;
        height: 80px;
        margin-left: 15px;
        background: #fff;
        display: flex;
        border-radius: 10px;

        img {
            margin: 0 10px;
            margin-top: 4px;
            width: 53px;
            height: 70px;
            position: relative;
            margin-left: 22px;
        }
    }



}

.fz_body {
    margin: 20px 20px;
    position: relative;
    .title {
        font-size: 18px;
        font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
        color: rgb(16, 14, 14);
    }

    .phone {
        margin-top: 10px;
        display: flex;
        justify-content: center;
        height: 70px;
        font-family: Georgia, 'Times New Roman', Times, serif;
        background-color: #ffffffee;
        border-radius: 10px;

        .phone_check {
            position: absolute;
            margin-top: 15px;
            margin-right: 244px;
            font-size: 15px;
            font-weight: bold;
            background-color: #fff;
        }

        .phone_test {
            position: absolute;
            margin-top: 38px;
            margin-right: 217px;
            font-size: 11px;
            background-color: #fff;
        }
    }

    .news_title {
        position: relative;
        top: 10px;
        font-size: 18px;
        font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
        color: rgb(16, 14, 14);
    }

    .news_content {
        display: flex;
        position: relative;
        height: 90px;
        top: 20px;
        background-color: #ffffffee;
        border-radius: 10px;
        padding: 20px 10px;

        .content_title {
            float: left;
            line-height: 1.2;
            width: 200px;
            height: 2.4em;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
            background-color: #fff
        }

        .content_author {
            position: absolute;
            font-weight: bold;
            font-size: 10px;
            color: #b6b1b1ee;
            background-color: #fff;
            margin-top: 60px;
            margin-right: 100px;

        }

        .content_time {
            position: absolute;
            font-weight: bold;
            font-size: 10px;
            color: #b6b1b1ee;
            background-color: #fff;
            margin-top: 60px;
            left: 80px;
        }

        .content_img {
            position: absolute;
            width: 100px;
            height: 70px;
            left: 220px;
        }
    }
}

* {
    background-color: rgb(234, 234, 234);
}
</style>